import styled from 'styled-components'
import Portrait_1 from '@a/images/personal/portrait_1.png'
import Portrait_2 from '@a/images/personal/portrait_2.png'

const Container = styled.div `
    
    overflow:hidden;
`

const Containimg = styled.div `
    width:100%;
    height:2rem;
    background-image:url(${Portrait_1});
    background-repeat:no-repeat;
    background-size: 100% 2rem;
    display:flex;
    align-items:center;
    justify-content: center;

    div{
        width:.64rem;
        height:.64rem;
        border-radius:.64rem;
        box-shadow: #ccc 0px 0px 2px 1px;
        background:#f8fafb;
        overflow:hidden;
        position:absolute;
        top:1.5rem;
        z-index:100;
        display:flex;
        align-items:center;
        justify-content:center;
        img{
            width:.84rem;
            height:.84rem;
        }
    }
`

const Conimg = styled.div `
    padding:1rem .23rem 0;
    background:url(${Portrait_2}) no-repeat;
    background-size:100%;
    position:relative;
    top:-0.6rem;
    h1{
        font-size:.18rem;
        text-align:center;
    }
    ul{
        display:flex;
        flex:1;
        flex-wrap:wrap;
        li{
            width:25%;
            margin-top:.3rem;
            display:flex;
            flex-direction:column;
            align-items: center;
            justify-content: center;
            .conimg{
                width:.8rem;
                height:.8rem;
            }
            .portrait{
                width:.8rem;
                height:.8rem;
            }
            img{
                width:.8rem;
            }
            .check{
                width:.18rem;
                position:relative;
                top:-.24rem;
                left:.5rem;
                display:none;
                &.active{
                    display:block;
                }
            }

            span{
                
            }

`

export {
    Container,
    Containimg,
    Conimg
}